<template>
	<div class="home-mine">
		<div class="mine-head flexbox">
			<div class="mine-avatar">
				<img class="avatar" :src="mineAvatar" />
			</div>
			<div class="mine-userinfo">
				<p>会员名称：测试会员001</p>
				<p>推荐人：测试推荐会员001</p>
				<p>会员等级：1级</p>
			</div>
			<!--签到-->
			<div class="sign">

			</div>
		</div>
		<!--销售/团队/广告/积分-->
		<div class="mineinfo flexbox">
			<div class="flex1">
				<p>我的团队</p>
				<p>1</p>
			</div>
			<div class="flex1">
				<p>广告费</p>
				<p>1</p>
			</div>
			<div class="flex1">
				<p>我的积分</p>
				<p>1</p>
			</div>
			<div class="flex1">
				<p>配股券</p>
				<p>1</p>
			</div>
		</div>
		<!--order info-->
		<div class="order-info flexbox">
			<router-link :to="{path: '/order?type=order_submit'}" class="flex1">
				<i class="iconfont icon-fukuan"></i>
				<p>待付款
					<!--<mt-badge type="error" size="small">30</mt-badge>-->
				</p>
			</router-link>
			<router-link :to="{path: '/order?type=order_pay'}" class="flex1">
				<i class="iconfont icon-daifahuo"></i>
				<p>待发货
					<!--<mt-badge type="error" size="small">30</mt-badge>-->
				</p>
			</router-link>
			<router-link :to="{path: '/order?type=order_shipping'}" class="flex1">
				<i class="iconfont icon-daishouhuo"></i>
				<p>待收货
					<!--<mt-badge type="error" size="small">30</mt-badge>-->
				</p>
			</router-link>
			<router-link :to="{path: '/order?type=evaluate'}" class="flex1">
				<i class="iconfont icon-pingjia-"></i>
				<p>待评价
					<!--<mt-badge type="error" size="small">30</mt-badge>-->
				</p>
			</router-link>
			<router-link :to="{path: '/order?type=all'}" class="flex1">
				<i class="iconfont icon-quanbudingdan"></i>
				<p>全部订单
					<!--<mt-badge type="error" size="small">30</mt-badge>-->
				</p>
			</router-link>
		</div>
		<!--cell-->
		<div class="cell-list">
			<mt-cell title="会员升级" to="/vip" is-link></mt-cell>
			<mt-cell title="收货地址管理" to="/address" is-link></mt-cell>
			<mt-cell title="积分商品" to="/product_list?type=2" is-link></mt-cell>
			<!--<mt-cell title="我的店铺" to="/store" is-link></mt-cell>-->
			<!--<mt-cell title="积分兑换" to="/product_list" is-link></mt-cell>-->
			<mt-cell title="新闻公告" to="/news" is-link></mt-cell>
			<!--<mt-cell title="充值中心" to="/product_list" is-link></mt-cell>-->
			<mt-cell title="余额提现" to="/reflect" is-link></mt-cell>
			<!--<mt-cell title="支付密码管理" to="//github.com" is-link></mt-cell>-->
			<!--<mt-cell title="我的银行卡" to="//github.com" is-link></mt-cell>-->
			<!--<mt-cell title="账号管理" to="//github.com" is-link></mt-cell>-->
			<mt-cell title="修改登录密码" to="/revise_password" is-link></mt-cell>
		</div>
		<!--logout-->
		<mt-button @click.native="handleLogout" class="logout-btn" type="danger" size="normal">退出登录</mt-button>
		<!--tabbar-->
		<tabbar></tabbar>
	</div>
</template>

<script>
	import tabbar from '../Sub/Tabbar';
	import { MessageBox, Toast } from 'mint-ui';
	export default {
		name: 'mine',
		data() {
			return {
				mineAvatar: '' || require('../../assets/images/common/head.png')
			}
		},
		components: {
			tabbar
		},
		methods: {
			handleLogout() {
				MessageBox.confirm('确定退出当前登录?').then(action => {
					Toast({
						message: '成功',
						position: 'bottom',
						duration: 5000
					});
					sessionStorage.removeItem('loginInfo');
					sessionStorage.removeItem('tabbarItem');
					this.$router.replace('/login');
				}).catch(res => {});
			}
		},
		created() {
			sessionStorage.setItem('tabbarItem', 'mine');
			this.api.setHeader('会员中心');
		}
	}
</script>

<style lang="less">
	.home-mine {
		font-size: 0.24rem;
		.mine-head {
			padding: 0.5rem 0.5rem 0.1rem;
		}
		.mine-avatar {
			margin-right: 0.5rem;
		}
		.mineinfo {
			background-color: rgba(228, 57, 60, .8);
			.flex1 {
				padding: 0.2rem 0;
				text-align: center;
				border-top: 1px solid #DFDFDF;
				border-bottom: 1px solid #DFDFDF;
				&:not(:first-child) {
					border-left: 1px solid #DFDFDF;
				}
				p {
					color: #FFFFFF;
				}
			}
		}
		.order-info {
			margin-top: 0.2rem;
			.flex1 {
				padding: 0.2rem 0;
				text-align: center;
				border-top: 1px solid #DFDFDF;
				border-bottom: 1px solid #DFDFDF;
				position: relative;
				&:not(:first-child) {
					border-left: 1px solid #DFDFDF;
				}
				p {
					.mint-badge {
						position: absolute;
						top: 1px;
						right: 2px;
						z-index: 1;
						padding: 1px 3px;
					}
				}
			}
		}
		.cell-list {
			margin-top: 0.2rem;
			color: #333;
		}
		.logout-btn {
			margin: 0.2rem;
			width: calc(~'100% - 0.4rem');
			position: absolute;
			bottom: 1.2rem;
		}
	}
</style>